<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">答案管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button @click="saveHandle" type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <!-- 表格 -->
    <el-table
      :data.sync="answers"
      height="590"
    >
      <el-table-column
        prop="answerId"
        label="试题编号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="answer"
        label="试题描述"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="isRight"
        label="试题类型"
        width="170"
      >
      <template slot-scope="scope">
        {{ parseAnswerType(scope.row.isRight)}}
      </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            @click="editHandle(scope.row)"
            type="text"
            size="small"
          >修改</el-button>
          <el-button
            @click="deleteHandle(scope.row)"
            type="text"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        :title="isSaveAnswer ? '新增答案' : '修改答案'"
        :visible.sync="saveAnswerDialog"
        width="40%">
        <el-form :model="changeAnswer" label-width="80px">
            <el-form-item v-if="!isSaveAnswer" label="答案编号">
                <el-input disabled v-model="changeAnswer.answerId"></el-input>
            </el-form-item>
            <el-form-item label="答案描述">
                <el-input v-model="changeAnswer.answer"></el-input>
            </el-form-item>
            <el-form-item label="是否正确">
              <el-select v-model="changeAnswer.isRight" placeholder="是否正确">
                <el-option v-for="(option, index) in rightOptions" :key="index" :label="option.codeName" :value="option.codeValue" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分值">
                <el-input v-model="changeAnswer.score"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="changeAnswerHandle">确定</el-button>
                <el-button @click="saveAnswerDialog = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { parseConfig } from '@/api/system/system.js'
export default {
  data() {
    return {
      total: 0,
      answers: [],
      rightOptions: [
        {
          codeName: '正确',
          codeValue: 1
        },
        {
          codeName: '错误',
          codeValue: 2
        }
      ],
      changeAnswer: {
        answerId: '',
        answer: '',
        sortId: 0,
        isRight: '',
        problemId: '',
        score: ''
      },
      saveAnswerDialog: false,
      isSaveAnswer: false,
    }
  },
  computed: {
    parseAnswerType() {
        return function(type) {
          return parseConfig(this.rightOptions, type)
        }
    }
  },
  methods: {
    async deleteHandle(row) {
        let tempArray = []
        this.answers.forEach(item => {
            if (row.sortId != item.sortId) {
                tempArray.push(item)
            }
        })
        this.answers = tempArray
    },
    async editHandle(row) {
        this.changeAnswer = {...row}
        this.isSaveAnswer = false
        this.saveAnswerDialog = true
    },
    saveHandle() {
        this.isSaveAnswer = true
        this.saveAnswerDialog = true
        this.changeAnswer = {
            answerId: '',
            answer: '',
            sortId: 0,
            isRight: '',
            problemId: '',
            score: ''
        }
    },
    changeAnswerHandle() {
      if (this.isSaveAnswer) {
        this.changeAnswer.sortId = this.answers.length + 1
        this.answers.push(this.changeAnswer)
      } else {
        let changeIndex = -1
        this.answers.forEach(item => {
            if (item.sortId === this.changeAnswer.sortId) {
                changeIndex = item.sortId - 1
            }
        })
        if (changeIndex >= 0) {
            this.$set(this.answers, changeIndex, this.changeAnswer)
        }
      }
      this.saveAnswerDialog = false
      this.$emit('answerChange', this.answers)
    },
    refreshAnswers() {
      this.answers = JSON.parse(this.$store.state.currentAnswers)
    }
  }
}
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>